<template>
    <div id="seachDialog">
      <a-modal
        title="添加产品"
        v-model="productData.show"
        width="900px"
        style="overflow:hidden"
        @cancel="handleClose">
        <el-row>
          <el-col :span="24">
            <el-table
            :data="dataList"
            border
            ref="productTables"
            v-loading="loading"
            @selection-change="handleSelectionChange"
            style="margin-top:14px;"
            >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="productName" label="产品名称"></el-table-column>
            <el-table-column
                show-overflow-tooltip
                width="300"
                prop="providerName"
                label="产品环节"
            >
               <template slot-scope="scope">
                    <span v-if="scope.row.productLink">{{scope.row.productLink.desc}}</span>
                </template> 
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip prop="shortName" label="产品状态">
                <template slot-scope="scope">
                    <span>{{scope.row.shortName?'已上架':'未上架'}}</span>
                </template>
            </el-table-column> -->
            <el-table-column prop="contactName" label="产品价格">
                <template slot-scope="scope">
                    <span>{{scope.row.lowerPriceLimit}}-{{scope.row.upperPriceLimit}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="productUnit" label="产品单位">
                <template slot-scope="scope">
                    <span v-if="scope.row.productUnit">{{scope.row.productUnit.desc}}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="createDate" label="创建时间">
                <template slot-scope="scope">
                    <span>{{scope.row.createDate | formatDate}}</span>
                </template>
            </el-table-column> -->
            </el-table>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="handleSend">添加</el-button>
            <el-button size="small" @click="handleClose">取消</el-button>
        </span>
       

      </a-modal>
    </div>
</template>

<script>
export default {
    props: ['productData'],
    data() {
        return {
          loading: false,
          dataList: [],
          multipleSelection: []
        }
    },
    methods: {
      handleClose () {
        this.productData.show = false
      },
      handleSelectionChange(val) { //选择用户成员
        this.multipleSelection = val;
      },
      handleSend () {
        let data = this.multipleSelection
        this.multipleSelection.forEach(el=>{
          el.productId = el.id
        })
        this.$emit('watchSlect',this.multipleSelection)
        this.handleClose()
      },
      toggleSelection () {
        this.$refs.productTables.clearSelection()
        this.productData.slectData.forEach(row => {
          this.dataList.forEach(el => {
            if (row.productId == el.id) {
              this.$refs.productTables.toggleRowSelection(el)
            }
          })
        })
      },
      render () {
        this.loading = true
        this.$post(this.$api.postProviderProductListOnSale,this.parames).then(response => {
            if (response.data.succeed) {
                this.dataList = response.data.data
                setTimeout(() => {
                    this.loading = false
                }, 200);
            }
            setTimeout(() => {
                this.toggleSelection()
            }, 200);
        })
      }
    },
    computed: { //计算属性
      changeDialog () {
        return this.productData.show
      }
    },
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.render()
          } else {
            // this.restData()
          }
        }
      },
      deep: true
    }
};
</script>
